'use client'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'

const linkData = [
	{ link: 'About', path: '/dashboard/about' },
	{ link: 'Setting', path: '/dashboard/setting' }
]

export default function DashboardLayout({
	children
}: Readonly<{
	children: React.ReactNode
}>) {
	const [count, setCount] = useState(0)
	const pathName = usePathname()

	return (
		<html lang='en'>
			<body>
				<div className='border-2 p-4 border-dashed border-black mx-auto mt-10 w-1/2'>
					<div className='flex gap-4 font-bold text-lg mb-4 '>
						{linkData.map((item) => (
							<Link
								className={pathName === item.path ? 'text-purple-500' : ''}
								href={item.path}
							>
								{item.link}
							</Link>
						))}
					</div>
					<h2>Dashboard Layout {count}</h2>
					<button
						className='bg-black p-2 text-white my-4 rounded-md'
						onClick={() => setCount(count + 1)}
					>
						Increment
					</button>
					{children}
				</div>
			</body>
		</html>
	)
}
